
<template>
	<view class="content">
		<view class="fixed-layout">
			<!-- 排序标签 -->
			<view class="list-sort-bar posts-sort">
				<button class="sort-button selected">正在悬赏</button>
				<button class="sort-button">历史悬赏</button>
			</view>
		</view>
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block half"></view>
		<!-- 帖子列表 -->
		<view class="post-card-list">
			<!-- 帖子 -->
			<view class="post-card">
				<!-- 用户信息 -->
				<view class="account-info post-card-account-info vip">
					<!-- 用户头像 -->
					<view class="account-head" >
						<!-- 头像图片容器 -->
						<view class="account-head-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
						<icon type="" class="account-hat hat-appreciation"></icon>
					</view>
					<!-- 文字和图标信息 -->
					<view class="account-info-content">
						<!-- 基础信息 -->
						<view class="base-info">
							<text class="account-nickName">用户名甲乙丙丁戊己用户名甲乙丙丁戊己</text>
							<view class="account-level"><text>999</text></view>
							<!-- 男性 -->
							<icon type="" class="imgIcon icon-male"></icon>
							<!-- 女性 -->
							<!-- <icon type="" class="imgIcon icon-female"></icon> -->
						</view>
						<!-- 附加信息 -->
						<view class="plus-info">
							<!-- VIP铭牌 -->
							<text class="account-nameplate">22</text>
							<!-- SVIP铭牌 -->
							<!-- <text class="account-nameplate">22</text> -->
							<!-- 店铺 -->
							<icon type="" class="imgIcon icon-store"></icon>
							<!-- 品牌 -->
							<icon type="" class="imgIcon icon-brand"></icon>
							<!-- 认证 -->
							<icon type="" class="imgIcon icon-tobacco"></icon>
							<!-- 鉴赏家 -->
							<icon type="" class="imgIcon icon-evaluation"></icon>
						</view>
						<!-- 时间 -->
						<view class="time-info">
							<text>2019-11-12 10:21:10</text>
						</view>
					</view>
					<!-- 功能 -->
					<view class="post-head-actions">
						<!-- 悬赏中 -->
						<button  @click="testReq" class="small-btn btn-bounty ">悬赏中</button>
					</view>
				</view>
				<!-- 帖子内容 -->
				<view class="post-content">
					<!-- 引用卡片 -->
					<view class="quote-card" @click="testReq">

						<!-- 预览图,去掉后，剩余内容自动充满 -->
						<view class="preview-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!-- 引用内容 -->
						<view class="quote-content">
							<!-- 引用活动标题 -->
							<text class="quote-content-title">七夕活动·二</text>
							<!-- 内容简介，文章、帖子、评价等文字内容的简介 -->
							<text class="quote-content-summary"><text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，依赖 display属性 + position属性 + float属性。</text>
							<!-- 通用类型数据 -->
							<view class="quote-content-detail">
								<!-- 活动热度 -->
								<text class="activity-heat">113344</text>
							</view>
						</view>
					</view>
				</view>
				<text class="post-wrong-tip">
					雪茄文化交流，吸烟有害健康，未成年人禁入!
				</text>
				<view class="post-bottom-bar">
					<button class="post-comment-btn" @click="testReq">评论</button>
				</view>
			</view>
			<!-- 帖子 -->
			<view class="post-card">
				<!-- 用户信息 -->
				<view class="account-info post-card-account-info vip">
					<!-- 用户头像 -->
					<view class="account-head" >
						<!-- 头像图片容器 -->
						<view class="account-head-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
						<icon type="" class="account-hat hat-appreciation"></icon>
					</view>
					<!-- 文字和图标信息 -->
					<view class="account-info-content">
						<!-- 基础信息 -->
						<view class="base-info">
							<text class="account-nickName">用户名甲乙丙丁戊己用户名甲乙丙丁戊己</text>
							<view class="account-level"><text>999</text></view>
							<!-- 男性 -->
							<icon type="" class="imgIcon icon-male"></icon>
							<!-- 女性 -->
							<!-- <icon type="" class="imgIcon icon-female"></icon> -->
						</view>
						<!-- 附加信息 -->
						<view class="plus-info">
							<!-- VIP铭牌 -->
							<text class="account-nameplate">22</text>
							<!-- SVIP铭牌 -->
							<!-- <text class="account-nameplate">22</text> -->
							<!-- 店铺 -->
							<icon type="" class="imgIcon icon-store"></icon>
							<!-- 品牌 -->
							<icon type="" class="imgIcon icon-brand"></icon>
							<!-- 认证 -->
							<icon type="" class="imgIcon icon-tobacco"></icon>
							<!-- 鉴赏家 -->
							<icon type="" class="imgIcon icon-evaluation"></icon>
						</view>
						<!-- 时间 -->
						<view class="time-info">
							<text>2019-11-12 10:21:10</text>
						</view>
					</view>
					<!-- 功能 -->
					<view class="post-head-actions">
						<!-- 悬赏中 -->
						<button  @click="testReq" class="small-btn btn-bounty selected">已悬赏</button>
					</view>
				</view>
				<!-- 帖子内容 -->
				<view class="post-content">
					<!-- 引用卡片 -->
					<view class="quote-card" @click="testReq">

						<!-- 预览图,去掉后，剩余内容自动充满 -->
						<view class="preview-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!-- 引用内容 -->
						<view class="quote-content">
							<!-- 引用活动标题 -->
							<text class="quote-content-title">七夕活动·二</text>
							<!-- 内容简介，文章、帖子、评价等文字内容的简介 -->
							<text class="quote-content-summary"><text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，依赖 display属性 + position属性 + float属性。</text>
							<!-- 通用类型数据 -->
							<view class="quote-content-detail">
								<!-- 活动热度 -->
								<text class="activity-heat">113344</text>
							</view>
						</view>
					</view>
				</view>
				<text class="post-wrong-tip">
					雪茄文化交流，吸烟有害健康，未成年人禁入!
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				value: 2
			}
		},
		methods: {
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
			}
		}
	}
</script>